<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>闲渔支付页面</title>



<style>
* {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
		sans-serif;
}

.tab-head {
	margin-left: 120px;
	margin-bottom: 10px;
}

.tab-content {
	clear: left;
	display: none;
}

h2 {
	border-bottom: solid #02aaf1 2px;
	width: 200px;
	height: 25px;
	margin: 0;
	float: left;
	text-align: center;
	font-size: 16px;
}

.selected {
	color: #FFFFFF;
	background-color: #02aaf1;
}

.show {
	clear: left;
	display: block;
}

.hidden {
	display: none;
}

.new-btn-login-sp {
	padding: 1px;
	display: inline-block;
	width: 75%;
}

.new-btn-login {
	background-color: #02aaf1;
	color: #FFFFFF;
	font-weight: bold;
	border: none;
	width: 100%;
	height: 30px;
	border-radius: 5px;
	font-size: 16px;
}

#main {
	width: 100%;
	margin: 0 auto;
	font-size: 14px;
}

.red-star {
	color: #f00;
	width: 10px;
	display: inline-block;
}

.null-star {
	color: #fff;
}

.content {
	margin-top: 5px;
}

.content dt {
	width: 100px;
	display: inline-block;
	float: left;
	margin-left: 20px;
	color: #666;
	font-size: 13px;
	margin-top: 8px;
}

.content dd {
	margin-left: 120px;
	margin-bottom: 5px;
}

.content dd input {
	width: 85%;
	height: 28px;
	border: 0;
	-webkit-border-radius: 0;
	-webkit-appearance: none;
}

#foot {
	margin-top: 10px;
	position: absolute;
	bottom: 15px;
	width: 100%;
}

.foot-ul {
	width: 100%;
}

.foot-ul li {
	width: 100%;
	text-align: center;
	color: #666;
}

.note-help {
	color: #999999;
	font-size: 12px;
	line-height: 130%;
	margin-top: 5px;
	width: 100%;
	display: block;
}

#btn-dd {
	margin: 20px;
	text-align: center;
}

.foot-ul {
	width: 100%;
}

.one_line {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #eeeeee;
	width: 100%;
	margin-left: 20px;
}

.am-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: box;
	width: 100%;
	position: relative;
	padding: 7px 0;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background: #1D222D;
	height: 50px;
	text-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	box-pack: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	box-align: center;
}

.am-header h1 {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	box-flex: 1;
	line-height: 18px;
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
}
</style>
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>

	<header class="am-header">
	<h1>闲渔订单支付</h1>
	</header>
	<div id="main">
		<div  id="tabhead" class="tab-head">
			<h2 id="tab1" class="selected" name="tab">付 款</h2>
		</div>
		<form name=alipayment onsubmit="return false">
			<div id="body1" class="show" name="divcontent">
				<dl class="content">
					<dt>商户订单号 ：</dt>
					<dd>
						<input id="WIDout_trade_no" name=out_trade_no />
					</dd>
					<hr class="one_line">
					<dt>订单名称 ：</dt>
					<dd>
						<input id="WIDsubject" name="subject" />
					</dd>
					<hr class="one_line">
					<dt>付款总金额 ：</dt>
					<dd>
						<input id="WIDtotal_amount" name="total_amount" />
					</dd>
					<hr class="one_line">
					<dt>数量 ：</dt>
					<dd>
						<input id="number" name="number" />
					</dd>
					<hr class="one_line">
					<dt>商品描述：</dt>
					<dd>
						<input id="WIDbody" name="body" />
					</dd>
					<hr class="one_line">
					<dt>收货地址 ：</dt>
					<dd>
						<input id="recAddr" name=recAddr />
					</dd>
					
					<dd id="btn-dd">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="button"
								style="text-align: center;">付 款</button>
						</span> <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
					</dd>
				</dl>
			</div>
		</form>
		
		<div id="foot">
			<ul class="foot-ul">
				<li>闲渔网版权所有 2015-2018 ALIPAY.COM</li>
			</ul>
		</div>
	</div>
	<script th:src="@{/js/common/jquery-3.5.1.min.js}"></script>
<script  th:inline="javascript">
var params;

	var tabs = document.getElementsByName('tab');
	var contents = document.getElementsByName('divcontent');
	
	$(function(){
		$(".new-btn-login").click(submit);
		 params=[[${param}]];//从域中取值
		console.log(params);
	 	GetDateNow(); 
	});
	
	//支付按钮点击事件、
	function submit(){
		if($("#recAddr").val()==""){
			alert("请填写收货地址");
			return;
		}
		var parames = new Array();
		var out_trade_no = document.getElementById("WIDout_trade_no").value;
		var subject = document.getElementById("WIDsubject").value = "闲渔商品";
		var recAddr =$("#recAddr").val();
		parames.push({ name: "out_trade_no", value: out_trade_no});
		parames.push({ name: "subject", value: subject});
        parames.push({ name: "number", value: params.number});
        parames.push({ name: "total_amount", value:params.total_amount});
        parames.push({ name: "body", value:params.body});
        parames.push({ name: "commoditysId", value:params.commoditysId});
        parames.push({ name: "sellerId", value:params.sellerId});
        parames.push({ name: "recAddr", value:recAddr});
        Post("/pay/request", parames);
	}
	/*
     *功能： 模拟form表单的提交
     *参数： URL 跳转地址 PARAMTERS 参数
     */
     function Post(URL, PARAMTERS) {
         //创建form表单
         var temp_form = document.createElement("form");
         temp_form.action = URL;
         //如需打开新窗口，form的target属性要设置为'_blank'
         temp_form.target = "_self";
         temp_form.method = "post";
         temp_form.style.display = "none";
         //添加参数
         for (var item in PARAMTERS) {
             var opt = document.createElement("textarea");
             opt.name = PARAMTERS[item].name;
             opt.value = PARAMTERS[item].value;
             temp_form.appendChild(opt);
         }
         document.body.appendChild(temp_form);
         //提交数据
         temp_form.submit();
     }
/* 	(function changeTab(tab) {
	    for(var i = 0, len = tabs.length; i < len; i++) {
	        tabs[i].onmouseover = showTab;
	    }
	})(); */
	
/* 	function showTab() {
	    for(var i = 0, len = tabs.length; i < len; i++) {
	        if(tabs[i] === this) {
	            tabs[i].className = 'selected';
	            contents[i].className = 'show';
	        } else {
	            tabs[i].className = '';
	            contents[i].className = 'tab-content';
	        }
	    }
	} */
	
	
	
	function GetDateNow() {
		var vNow = new Date();
		var sNow = "";
		sNow += String(vNow.getFullYear());
		sNow += String(vNow.getMonth() + 1);
		sNow += String(vNow.getDate());
		sNow += String(vNow.getHours());
		sNow += String(vNow.getMinutes());
		sNow += String(vNow.getSeconds());
		sNow += String(vNow.getMilliseconds());
		document.getElementById("WIDout_trade_no").value =  sNow;
		document.getElementById("WIDsubject").value = "闲渔商品";
		document.getElementById("WIDtotal_amount").value = params.total_amount;
		$("#number").val(params.number);
		$("#WIDbody").val(params.body);
		console.log(typeof params.buyerId)
	}

</script>

</body>

</html>
